/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Input, Popconfirm, Switch, Table} from 'antd';

import styles from '../index.less';
import DirTree from '../../components/DirTree';
import FormBase from '../../components/Base/FormBase';
import notify from "../../components/NotificationExtra";
import moment from "moment";
import ViewTitle from "../../components/ViewTitle";
import {FormField, ModalView, SearchForm} from "antd-extra";
import ModalUploadFile from "../../components/UploadFile/index";
import ModalFileDetail from "./modal/ModalFileDetail";

const _ = require('lodash');

const table = 'Dic';

@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,
            treeNode
          }) => ({...user, ...global, ...material, ...dynamicLabel, ...treeNode}))
export default class Index extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.onDataLoad().then(res => {
      this.setState({files: res});
    });

  }

  async onDataLoad() {
    const {treeNode} = this.state;
    if (!treeNode) return;
    const {treeId} = treeNode;
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });
    payload.treeId = treeId;
    const res = await this.props.dispatch({
      type: 'dic/findFileMany',
      payload
    });

    return res.result;
  }

  onTreeNodeSelected = (node) => {
    if (!node) return;
    this.state.treeNode = node;
    this.componentDidMount();
  };
//todo
  onTreeDelete = (_id, result) => {

  };

  onDelete = (record) => {
    const {code} = record;
    this.props.dispatch({
      type: 'dic/deleteFile',
      payload: {code}
    }).then(res => {
      this.requestReturn(res);
      this.componentDidMount();
    });
  };

  cols() {
    return [
      {title: '文件名', dataIndex: 'filename'},
      {
        title: '创建者',
        dataIndex: 'createUsername',
        key: 'createUsername',
        width: 120
      },
      {
        title: '创建时间',
        dataIndex: 'createdTs',
        key: 'createdTs',
        width: 160,
        render: value => {
          return <div>{moment(value).format('YYYY-MM-DD hh:mm:ss')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 160, fixed: 'right',
        render: (value, record) => {
          return <span>
            {<a style={{marginRight: '6px'}}
                onClick={() => {
                  ModalView.open(ModalFileDetail, {
                    title: '上传文件',
                    width: '920px'
                  }, {
                    record
                  });
                }}>详情</a>}
            {
              <Popconfirm
                title="确认删除"
                onConfirm={() => this.onDelete(record)}
                okText="是"
                cancelText="否"
              >
                <a style={{marginRight: '6px'}} disabled={record.reviewStatus === '同意'}>删除</a>
              </Popconfirm>
            }</span>;
        }
      }
    ];
  }

  dataPage = () => {
    const {form} = this.props;
    const {files = [], treeNode = {}} = this.state;
    const {treeId} = treeNode;
    const info = this.getLoginInfo();
    const {nickname} = info;
    return <Form>
      <ViewTitle
        title={'文件列表'}
        actions={
          <Button type="primary" onClick={() => {
            ModalView.open(ModalUploadFile, {
              title: '上传文件',
              width: '920px'
            }, {
              callback: (data) => {
                data.treeId = treeId;
                data.createUsername = nickname;
                this.props.dispatch({
                  type: 'dic/uploadFile',
                  payload: data
                }).then(res => {
                  this.requestReturn(res);
                  this.componentDidMount();
                });
              }
            });
          }}>添加</Button>
        }
      >
      </ViewTitle>
      <SearchForm
        style={{marginLeft: '6px', marginRight: '6px'}}
        onSearch={() => {
          this.state.current = 1;
          this.componentDidMount();
        }}
        onReset={this.handleReset}
        cols={2}
        min={4}
        expandText="展开"
        form={form}
      >
        {<FormField
          label={'文件名称'}
          name={'filename'}
        >
          <Input></Input>
        </FormField>}
      </SearchForm>


      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.cols()}
        dataSource={files}
        scroll={{x: true}}
        pagination={{
          current: this.state.current,
          total: this.state.total,
          showSizeChanger: true,
          onChange: page => {
            this.state.current = page;
            this.componentDidMount();
          },
          onShowSizeChange: (current, pageSize) => {
            this.state.current = 1;
            this.state.pageSize = pageSize;
            this.componentDidMount();
          }
        }}
        //  scroll={{ x: 1300 }}
      ></Table>
    </Form>;

  };

  render() {
    const {dispatch, expandedKeys, _notify} = this.props;
    if (_notify) {
      notify(_notify);
    }
    let title = '文档目录';
    return (
      <Form className={styles.content}>
        <DirTree
          disableEdit={false}
          table={table}
          dispatch={dispatch}
          onTreeDelete={this.onTreeDelete}
          onTreeNodeSelected={this.onTreeNodeSelected}
          expandedKeys={expandedKeys}
          defaultExpandAll={true}
          title={title}
        > {this.dataPage()}</DirTree>

      </Form>
    );
  }
}
